<template>
  <div class="al_learn_list_arr_box">
    <h2 class="ti">线性结构算法可视化</h2>
    <div class="box" id="app">
      <div class="title">
        <ul class="fa">
          <li class="son pa"
              :class="{sonSel:curSel==i}"
              v-for="(it, i) in titleList"
              :key="it"
              @click="curSel=i">
            {{ it }}
          </li>
        </ul>
      </div>
      <div class="miTitle">
        <ul class="innerMiTitle">
          <li class="item pa"
              :class="{itemSel:curSelFun==i}"
              v-for="(it, i) in laTitleList"
              :key="it"
              @click="curSelFun=i">
            {{ it }}
          </li>
        </ul>
      </div>
      <div class="cont cont1" v-show="curSel==0">
        <div class="btn">
          <ul>
            <li>
              <a-button size="large">
                初始化
              </a-button>
            </li>
            <li>
              <a-input class="inp"
                       size="large"
                       v-model="inpEle"
                       onkeydown="push"
              >
              </a-input>
              <a-button size="large"
                        @click="push">
                插入
              </a-button>
            </li>
            <li>
              <a-input class="inp"
                       v-model="delNum"
                       size="large"
                       onkeydown="delNumFun">
              </a-input>
              <a-button size="large"
                        @click="delNumFun">
                删除
              </a-button>
            </li>
            <li>
              <a-input class="inp" size="large" v-model="findTarget"></a-input>
              <a-popover
                placement="bottom"
                title="查找哪一个元素"
                width="200"
                trigger="manual"
                :content="findResulCon"
                v-model="showFinRes">
                <a-button size="large" @click="findElement">
                  查找
                </a-button>
              </a-popover>
            </li>
            <li>
              <a-button size="large" @click="clearArr">
                置空
              </a-button>
            </li>
          </ul>
        </div>
        <div class="showBox lian" v-show="curSelFun==0">
          <div class="showNum">
                    <span>
                        当前数组长度
                        {{ showArr.length }}
                    </span>
          </div>
          <div class="showList">
            <ul>
              <li class="linkLi fl" v-for="(it, i) in showArr" :key="it">
                <div v-if="i" class="preLink fl">
                  <div class="tran fl"></div>
                  <div class="line fl"></div>
                </div>
                <a-button class="fl" type="danger" size="large">
                  {{ it.txt }}
                </a-button>
              </li>
            </ul>
          </div>
        </div>
        <div class="showBox shun" v-show="curSelFun==1">
          <div class="showNum">
              <span>
                  当前数组长度
                  {{ showArr.length }}
              </span>
          </div>
          <div class="showList">
            <ul>
              <li class="fl" v-for="(it, i) in showArr" :key="it.txt">
                <a-button type="danger" size="large">
                  <a-dropdown @command="optElem">
                    <span class="a-dropdown-link"
                          v-show="it.flag" @click="editShow(i)">
                      {{ it.txt }}
                    </span>

                    <a-input type="text" v-model="it.txt"
                             :ref="itemInp"
                             v-show="!it.flag"
                             size="large"
                             class="itemInp"
                             :on-blur="save(i)">
                    </a-input>

                    <a-dropdown-menu>
                      <a-dropdown-item icon="a-icon-plus"
                                       :command="handleCommand('insert', i)">
                        插入元素
                      </a-dropdown-item>
                      <a-dropdown-item icon="a-icon-minus"
                                       :command="handleCommand('del', i)">
                        删除元素
                      </a-dropdown-item>
                    </a-dropdown-menu>
                  </a-dropdown>
                </a-button>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="cont cont2" v-show="curSel==1">
        <div class="btn">
          <ul>
            <li>
              <a-button size="large">
                初始化
              </a-button>
            </li>
            <li>
              <a-input class="inp"
                       size="large"
                       v-model="inpEle"
                       onkeydown="push">
              </a-input>
              <a-button size="large"
                        @click="push">
                push
              </a-button>
            </li>
            <li>
              <a-button size="large"
                        @click="pop">
                pop
              </a-button>
            </li>
            <li>
              <a-button size="large" @click="clearArrStark">
                置空
              </a-button>
            </li>
          </ul>
        </div>
        <div class="showBox lian" v-show="curSelFun==0">
          <div class="showNum">
                    <span>
                        当前数组长度
                        {{ showArr.length }}
                    </span>
          </div>
          <div class="showList">
            <ul>
              <li class="linkLi fl" v-for="(it, i) in showArr" :key="it.txt">
                <div v-if="i" class="preLink fl">
                  <div class="tran fl"></div>
                  <div class="line fl"></div>
                </div>
                <a-button class="fl" type="danger" size="large">
                  {{ it.txt }}
                </a-button>
              </li>
            </ul>
          </div>
        </div>
        <div class="showBox shun" v-show="curSelFun==1">
          <div class="showNum">
                    <span>
                        当前数组长度
                        {{ showArr.length }}
                    </span>
          </div>
          <div class="showList">
            <ul>
              <li class="fl" v-for="it in showArr" :key="it.txt">
                <a-button type="danger" size="large">
                  {{ it.txt }}
                </a-button>
              </li>
            </ul>
          </div>
        </div>

      </div>
      <div class="cont cont3" v-show="curSel==2">
        <div class="btn">
          <ul>
            <li>
              <a-button size="large">
                init
              </a-button>
            </li>
            <li>
              <a-input class="inp"
                       size="large"
                       v-model="inpEle"
                       onkeydown="push">
              </a-input>
              <a-button size="large"
                        @click="unshift">
                入队
              </a-button>
            </li>
            <li>
              <a-button size="large"
                        @click="shift">
                出队
              </a-button>
            </li>
            <li>
              <a-button size="large" @click="clearArrQue">
                置空
              </a-button>
            </li>
          </ul>
        </div>
        <div class="showBox lian" v-show="curSelFun==0">
          <div class="showNum">
                    <span>
                        当前数组长度
                        {{ showArr.length }}
                    </span>
          </div>
          <div class="showList">
            <ul>
              <li class="linkLi fl" v-for="(it, i) in showArr" :key="it.txt">
                <div v-if="i" class="preLink fl">
                  <div class="tran fl"></div>
                  <div class="line fl"></div>
                </div>
                <a-button class="fl" type="danger" size="large">
                  {{ it.txt }}
                </a-button>
              </li>
            </ul>
          </div>
        </div>
        <div class="showBox shun" v-show="curSelFun==1">
          <div class="showNum">
            <span>
                当前数组长度
                {{ showArr.length }}
            </span>
          </div>
          <div class="showList">
            <ul>
              <li class="fl" v-for="it in showArr" :key="it.txt">
                <a-button type="danger" size="large">
                  {{ it.txt }}
                </a-button>
              </li>
            </ul>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";

const curSel = ref(0);
// 什么方式存储
const curSelFun = ref(1);
const titleList = ref([
  "线性表", "栈", "队列"
]);
const laTitleList = ref([
  "链式存储", "顺序存储"
]);
const showArr = ref([{
  txt: 1,
  flag: 1
}, {
  txt: 2,
  flag: 1
}, {
  txt: 3,
  flag: 1
}]);
const itemInp = ref(null);
//插入数
const inpEle = ref(0);
const delNum = ref(0);// 删除数
const showFinRes = ref(false);// 查找结果是否显示
const isFind = ref(1);//是否找到元素
const findTarget = ref(1);// 查找哪一个元素
const findResulCon = () => {
  if (isFind.value >= 0) return "找到元素！ ！！在第" + isFind.value + "位置上";
  return "没有该元素！ ！！";
};
const push = () => {
  if (!inpEle.value) return;
  showArr.value.push({
    txt: inpEle.value,
    flag: 1
  });
  inpEle.value = 0;
};
const unshift = () => {
  showArr.value.unshift({
    txt: inpEle.value,
    flag: 1
  });
};
const shift = () => {
  showArr.value.shift();
};
/*const pop = () => {
  showArr.value.pop();
};*/
const delNumFun = () => {
  showArr.value = showArr.value.filter(it => {
    return it.txt != delNum.value;
  });
  console.log("del");
};
const pop = () => {
  showArr.value.splice(showArr.value.length - 1, 1);
  console.log("pop");
};
// const editShow = (i) => {
//   console.log("showArr", showArr.value);
//   console.log("showArr", i);
//   i=0;
// showArr.value?[i]?.flag = !showArr.value[i].flag;
// console.log(itemInp.value?[i]?.input);
// itemInp.value?.focus();
// };
// const save = (i) => {
//   console.log(i);
//   i=0;
//    showArr.value[i].txt = ref.itemInp.value;
// showArr.value?[i]?.flag = !showArr.value?[i]?.flag;
// };
const optElem = (command) => {
  let { i } = command;
  switch (command.txt) {
    case "insert": {
      showArr.value.splice(i, 0, {
        txt: "newElement",
        flag: 1
      });
      break;
    }
      ;
    case "del": {
      showArr.value.splice(i, 1);
      break;
    }
  }
  console.log(i);
};
const handleCommand = (txt, i) => {
  return {
    txt, i
  };
};
const clearArr = () => {
  showArr.value.splice(0, showArr.value.length);
};
const clearArrStark = () => {
  let timer = setInterval(() => {
    if (!showArr.value.length) clearInterval(timer);
    pop();
  }, 200);
};
const clearArrQue = () => {
  let timer = setInterval(() => {
    if (!showArr.value.length) clearInterval(timer);
    shift();
  }, 200);
};
const findElement = () => {
  showFinRes.value = !showFinRes.value;
  showArr.value.forEach((it, i) => {
    console.log(i);
    if (it.txt == findTarget.value) {
      isFind.value = i;
    }
  });
};
</script>

<style scoped>
.al_learn_list_arr_box {
  height: 1050px;
}

.ti {
  width: 100%;
  text-align: center;
  color: purple;
  line-height: 60px;
}

.box {
  width: 90%;
  height: 70%;
  border: 1px solid plum;
  margin: 0 auto;
}

.box .title {
  height: 8%;
}

.box .title .fa {
  display: flex;
  height: 100%;
}

.box .title .fa .son {
  display: block;
  line-height: 250%;
  height: 100%;
  width: 34%;
  text-align: center;
  background-color: pink;
  border-right: 1px solid purple;
  color: white;
}

.box .title .fa .sonSel {
  background-color: palevioletred;
}

.box .miTitle {
  height: 5%;
}

.box .miTitle .innerMiTitle {
  height: 100%;
  display: flex;
}

.box .miTitle .innerMiTitle .item {
  color: white;
  border-right: 1px solid purple;
  text-align: center;
  height: 100%;
  line-height: 150%;
  background-color: #f5c6dd;
  width: 50%;
}

.box .miTitle .innerMiTitle .itemSel {
  background-color: #f57ab7;
}

.box .miTitle .innerMiTitle .itemSel:after {
  height: 1px;
  width: 100%;
  border: 1px solid purple;
}

.box .cont {
  height: 87%;
  background-color: gray;
}

.box .cont .btn {
  height: 10%;
}

.box .cont .btn ul {
  padding-top: 5px;
  height: 100%;
  line-height: 100%;
  display: flex;
}

.box .cont .btn ul li {
  padding-left: 25px;
  margin: 0 auto;
  width: 20%;
}

.box .cont .btn ul li .inp {
  width: 40%;
}

.box .cont .showBox {
  height: 77%;
  border-top: 1px solid purple;
  padding: 10px;
}

.box .cont .shun .showNum,
.box .cont .lian .showNum {
  height: 10%;
}

.box .cont .shun .showList,
.box .cont .lian .showList {
  padding: 10px;
}

.box .cont .shun .showList ul li,
.box .cont .lian .showList ul li {
  margin-right: 10px;
  margin-bottom: 1%;
}

.box .cont .shun .showList ul li .itemInp input,
.box .cont .lian .showList ul li .itemInp input {
  width: 43px;
  height: 21px;
}

.box .cont .shun .showList ul .linkLi,
.box .cont .lian .showList ul .linkLi {
  margin-right: 0px;
}

.box .cont .lian .showList .preLink {
  padding-top: 6px;
}

.box .cont .lian .showList .preLink .tran {
  width: 0px;
  height: 0px;
  border: 10px solid transparent;
  /*以下四个样式对应四种三角形，任选其一即可实现*/
  /* border-top-color:lightseagreen; */
  /* border-left-color:lightseagreen; */
  border-right-color: #e295e5;
  /*border-bottom-color:lightseagreen;*/
}

.box .cont .lian .showList .preLink .line {
  height: 5px;
  width: 30px;
  background-color: #ff004c;
  margin-top: 7px;
}
* {
  padding: 0;
  margin: 0;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
body, html{
  width: 100%;
  height: 787px;
}
a {
  text-decoration: none;
  color: black;
}
ul {
  list-style: none;

}
.pa {
  cursor: pointer;
}
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}
</style>